<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>层级选择器</title>
    <script src="../../js/jquery-1.4.2.js"></script>
    <style>
        body{
            font-family: "微软雅黑";
        }
        div,span{
            width:140px;
            height: 140px;
            margin:20px;
            border:1px solid #000;
            float:left;
            font-size:17px;
            font-family: Roman;
        }

        div.mini{
            width:40px;
            height:43px;
            background:#CC66FF;
            border : 1px solid #000;
            font-size:12px;
            font-family: Roman;
        }
        input{
            margin:5px 5px;
        }
    </style>
</head>
<body>
<input type="button" id="b1" value="改变body内所有div的背景颜色为#F08080">
<input type="button" id="b2" value="改变body内子div的背景颜色为#FF0033">
<input type="button" id="b3" value="改变id 为one的下一个div的背景颜色为#0000FF">
<input type="button" id="b4" value ="改变id为two的元素的后面的所有div兄弟元素的背景色为#9ACD32">
<input type="button" id="b5" value ="改变id为two 的元素所有的div兄弟元素的背景色为#FF6347">

    <h1>天气热了</h1>
    <h2>天气很热了</h2>

  <div class="one">
        class是one
        <div class="mini01">class是mimi01</div>
        <div class="mini">class是mini</div>
    </div>

    <div id="one">id是one</div>

    <div id="two" class="mini">
        id为two,class是mini
        <div class="mini">class是mini</div>
    </div>

    <br>

    <div id="mover">动画</div>

</body>
<script>
    //让整个页面加载完成就执行
    $(function(){
        // 1.改变body内所有div的背景颜色为#F08080
        $("#b1").click(function(){
            //后代选择器
            $("body div").css("background","#D08080")
        })
        //2.改变body内子div的背景颜色为#FF0033
         $("#b2").click(function(){
             //子代选择器
             $("body>div").css("background","#FF0033")
         })
        //3.改变id 为one的下一个div的背景颜色为#0000FF
         $("#b3").click(function(){
             //相邻兄弟选择器
             $("#one+div").css("background","#0000FF")
         })
        //4.改变id为two的元素的后面的所有div兄弟元素的背景色为#9ACD32
         $("#b4").click(function(){
             $("#two~div").css("background","#9ACD32")
         })
        //5. 改变id为two 的元素所有的div兄弟元素的背景色为#FF6347
         $("#b5").click(function(){
              $("#two").siblings("div").css("background","#FF6347")
         })
    })
</script>
</html>